Creating animated UI controls

To create a reusable UI control that responds to user interaction with an animation:

Create a prefab for your UI control and add the prefab to an active scene in your project. See Using object prefab placeholders.
For example, create a Button, add to it a Box, and drag the prefab to the active scene.
Animate the mesh in your UI control. See Animating movement or Animating property values.
For example, create an animation that moves or scales the Box in the Button.
Connect an event of the UI control with the animation. For example, connect the Click event of the Button with the animation:
1. In the Project select your UI control in the Prefabs.
  For example, if you created a Button, select it.
2. In the Properties click the Add drop-down menu for the Click trigger and select Play Animation action.
3. In the Play Animation editor set:
  - Target Item to the mesh inside the UI control.
    For example, if you created a Box, use a relative path and enter ./Box.
  - Animation to the animation you want to use to animate your UI control when a user interacts with it.
4. Click the UI control in the Preview to try it out.
  You can reuse this UI control anywhere in your Kanzi application.
  Make sure that the Preview is in Play mode and that the Preview is not in the Edit mode. See Controlling your application in the Preview

See also